<template>
  <section class="page-content">
    <div class="toolbar">
      <el-form :inline="true" :model="params">
        <el-form-item label="产品名称">
          <el-input v-model="formData.name" size="small" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item label="产品分类">
          <el-select v-model="formData.category_id" size="small" placeholder="产品分类">
            <el-option
              label="全部"
              value="">
            </el-option>
            <el-option
              v-for="item in categories"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="search" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" icon="plus" @click="jump">新增</el-button>
        </el-form-item>
        <el-form-item v-if="multipleSelection.length > 0">
          <el-button type="danger" size="mini" icon="plus" @click="multipleDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData.data"
      @sort-change="sort"
      border
     @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form
            inline
            label-position="left" 
            class="table-expand"
            label-width="90px"
            size="mini">
            <el-form-item label="产品名称:">
              <span>{{ scope.row.name }}</span>
            </el-form-item>
            <el-form-item label="产品分类:">
              <span>{{ scope.row.category.name }}</span>
            </el-form-item>
            <el-form-item label="产品价格:">
              <span>{{ scope.row.price }}</span>
            </el-form-item>
            <el-form-item label="产品原价:">
              <span>{{ scope.row.original_price }}</span>
            </el-form-item>
            <el-form-item label="产品库存:">
              <span>{{ scope.row.goods_number }}</span>
            </el-form-item>
            <el-form-item label="产品销量:">
              <span>{{ scope.row.sales_number }}</span>
            </el-form-item>
            <el-form-item label="关键词:">
              <span>{{ scope.row.keywords }}</span>
            </el-form-item>
            <el-form-item label="描述:">
              <span>{{ scope.row.description }}</span>
            </el-form-item>
            <el-form-item label="创建时间:">
              <span>{{ scope.row.created_at }}</span>
            </el-form-item>
            <el-form-item label="更新时间:">
              <span>{{ scope.row.updated_at }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
     <!--  <el-table-column
        type="selection"
        width="45">
      </el-table-column> -->
      <el-table-column
        prop="id"
        width="80"
        sortable
        label="ID">
      </el-table-column>
       <el-table-column
        label="缩略图"
        width="120">
         <template slot-scope="scope">
            <img :src="scope.row.thumb_img" alt="" style="width:100px;">
         </template>
      </el-table-column>
      <el-table-column
        prop="name"
        width="200"
        sortable
        label="名称">
      </el-table-column>
      <el-table-column
        prop="order"
        width="75"
        sortable
        label="排序">
      </el-table-column>
      <el-table-column
        prop="price"
        sortable
        width="100"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="is_on_sale"
        sortable
        width="75"
        label="上架">
         <template slot-scope="scope">
          <i class="el-icon-check" v-if="scope.row.is_on_sale"></i>
          <i class="el-icon-close" v-if="!scope.row.is_on_sale"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="category_id"
        sortable
        label="分类">
        <template slot-scope="scope">
          {{scope.row.category.name}}
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        sortable
        label="创建日期"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editRow(scope.row)"
            type="default"
            size="mini">
            编辑
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.row)"
            type="danger"
            size="mini">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
     <div class="block toolbar">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableData.current_page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="parseInt(tableData.per_page)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total">
      </el-pagination>
    </div>
  </section>
</template>
<script>
  import {generateUrl} from '@/utils/helpers'
  export default {
    data () {
      return {
        loading: false,
        categories: '',
        multipleSelection: [],
        tableData: {
          first_page_url: '',
          from: '',
          to: '',
          last_page: '',
          last_page_url: '',
          next_page_url: '',
          prev_page_url: '',
          path: '',
          per_page: 0,
          total: 0,
          data: []
        },
        formData: {
          category_id: '',
          name: ''
        },
        params: {
          order_by: 'id',
          order_type: 'desc',
          page_size: 20,
          category_id: '',
          name: '',
          page: 1
        }
      }
    },
    mounted () {
      this._getData('/goods')
      this._getCategories()
    },
    watch: {
      params: {
        deep: true,
        handler (newValue) {
          this._getData(generateUrl('/goods', newValue))
        }
      }
    },
    methods: {
      deleteRow (row) {
        this.$confirm('确定要删除该产品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          this.$http.delete('/goods/' + row.id).then((response) => {
            this.loading = false
            this.$message.success('删除成功')
            this._getData()
          }).catch((error) => {
            this.loading = false
            console.log(error)
          })
        }).catch(() => {
        })
      },
      multipleDelete () {
        console.log(this.multipleSelection)
      },
      editRow (item) {
        this.$router.push('/goods/edit/' + item.id)
      },
      onSubmit () {
        this.params.category_id = this.formData.category_id
        this.params.name = this.formData.name
      },
      handleSizeChange (val) {
        this.params.page_size = val
      },
      handleCurrentChange (val) {
        this.params.page = val
      },
      sort (data) {
        let orderType = ''
        if (data.order === 'ascending') {
          orderType = 'asc'
        }
        if (data.order === 'descending') {
          orderType = 'desc'
        }
        this.params.order_type = orderType
        this.params.order_by = data.prop
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      jump () {
        this.$router.push('/goods/create')
      },
      _getData (url) {
        url = generateUrl(url, this.params)
        this.loading = true
        this.$http.get(url).then((response) => {
          this.loading = false
          this.tableData = response.data
        }).catch((error) => {
          this.loading = false
          console.log(error)
        })
      },
      _getCategories () {
        this.$http.get('/categories?belongs_to=goods&data_type=tree').then((response) => {
          this.categories = response.data
        }).catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped>
  .table-expand {
    font-size: 0;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 40%;
  }
</style>
